<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[HMTL&CSS]渐变进度条</title>
    <style>
        *{
            margin:0;  
        }
        body{
            display:flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2c3e50;
        }
        h1{
            color:#3498db;
            font-size:30px;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        span{
            display: inline-block;
            text-shadow: 1px 2px 5px rgba(0, 255, 255, .5);
            animation: load-text 1s infinite cubic-bezier(0.1, 0.15, 0.9, 1);
        }
        span:nth-child(1){
            animation-delay: 0s;
        }
        span:nth-child(2){
            animation-delay: .3s;
        }
        span:nth-child(3){
            animation-delay: .6s;
        }
        span:nth-child(4){
            animation-delay: .9s;
        }
        span:nth-child(5){
            animation-delay: 1.2s;
        }
        span:nth-child(6){
            animation-delay: 1.5s;
        }
        span:nth-child(7){
            animation-delay: 1.8s;
        }
        span:nth-child(8){
            animation-delay: 2.1s;
        }
        span:nth-child(9){
            animation-delay: 2.4s;
        }
        div{
            overflow: hidden;
            position: relative;
            width: 300px;
            height: 30px;
            background: #fff;
            border: 1px solid #000;
            box-shadow: 1px 0px 2px rgba(0, 0, 0, .5);
            border-radius: 20px;
        }
        div::after{
            content: "";
            position: absolute;
            top:0;
            left:0;
            height: 100%;
            width: 100%;
            border-radius: 20px;
            background:#e74c3c;
            background-size: 400%;
            animation:  load 4s infinite linear;
        }
        @keyframes load {
            0%{
                width: 5%;
                background: #e67e22;
            }
            30%{
                background: #f1c40f;
            }
            60%{
                background: #9b59b6;
            }
            90%{
                width: 100%;
                background: #e74c3c;
                /* background-position: -400% 100%; */
            }
        }
        @keyframes load-text {
            0% {
              transform: translateY(0px);
            }
            25% {
              transform: translateY(5px);
            }
            50% {
              transform: translateY(0px);
            }
            75% {
              transform: translateY(-5px);
            }
            100% {
              transform: translateY(0px);
            }
        }
    </style>
</head>
<body>
    <h1>
        <span>L</span>
        <span>O</span>
        <span>A</span>
        <span>D</span>
        <span>I</span>
        <span>N</span>
        <span>G</span>
        <span>.</span>
        <span>.</span>
        <span>.</span>
    </h1>
    <div></div>
</body>
</html>